<template>
	<view class="page">
		<view class="top">
			<view class="top1" @click="updateAvatar">
				<text>头像</text>
				<view class="">
					<image :src="user_pic" mode="" v-if="user_pic"></image>
					<image  src="/static/images/logo.png" mode="" v-else></image>
					
					<text>></text>
				</view>
				
				
				
			</view>
			<view class="top1">
				名字<input type="text" name="" id=""  v-model="nick_name"/>
			</view>
			<view class="top1">
				手机号<input type="text" name="" id=""  v-model="phoneNum"/>
			</view>
		</view>
		<view class="between1">
			<view  class="iconfont icon-wodedizhi">我的地址</view><span>>></span>
		</view>
		<view class="between2">
			<view  class="iconfont icon-xiugaimima" @click="upatepsd">修改密码</view><span>>></span>
		</view>
		<view class="end" @click="changeInfo">
			保存修改
		</view>
	</view>
</template>

<script>
import { updateUser } from '../../api'

	export default {
		data() {
			return {
				user_pic:'',
				nick_name:"",
				phoneNum:"",
				userId:""
			}
		},
		created(){
			const user=uni.getStorageSync('userInfo')
			this.nick_name=user.nick_name,
			this.phoneNum=user.phoneNum,
			this.user_pic=user.user_pic,
			this.userId=user.id
		},
		methods: {
			upatepsd(){
				uni.navigateTo({
					url:"/pages/updatedPassword/updatedPassword"
				})
			},
			//保存修改
			changeInfo(){
			updateUser({id:this.userId,nick_name:this.nick_name,user_pic:this.user_pic,phoneNum:this.phoneNum})
			.then(res=>{
				if(res.data.status===0){
					//
					uni.showToast({
						title:"修改成功"
					});
					let info = uni.getStorageSync('userInfo');
					//保存最新数据到本地
					let userInfo={...info,nick_name:this.nick_name,user_pic:this.user_pic,phoneNum:this.phoneNum};
					uni.setStorageSync("userInfo",userInfo);
					// 添加跳转到"我的"界面
										setTimeout(() => {
											uni.switchTab({
												url: '/pages/my/my'
											})
										}, 1500)
				}
				else{
									uni.showToast({
										title: '修改失败',
										icon: 'none'
									});
								}
			})
			},
			//修改图像
			updateAvatar(){
				//选择图片
				uni.chooseMessageFile({
					count:1,
					type:"image",
					success:(res=>{
						console.log(res,"选择的那个东西");
						let imageUrl=res.tempFiles[0].path
						console.log(imageUrl);
						//上传图片临时地址到服务器
						uni.uploadFile({
							url:"http://8.140.198.52:8001/common/uploadFile",
							filePath:imageUrl,
							name:"file",
							header:{
								"Authorization":uni.getStorageSync("token"),
								'content-type':'multipart/form-data',
							},
							success: (res) => {
								console.log(res,"图片在服务器上的地址");
								this.user_pic=res.data
							}
						})
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page{
	background-color: #f2f2f2;
	width: 100%;
	height: 100vh;
	.top{
		width: 100%;
		
		background-color: white;
		
	}
	
	.top1{
		width: 94%;
		height: 50px;
		margin: 0 auto;
		line-height: 50px;
		// background-color: pink;
		border-bottom: 1px solid #ebebeb;
		display: flex;
		justify-content: space-between;
		image{
			width: 30px;
			height: 30px;
			margin-top: 10px;
		}
		input{
			// background-color: red;
			margin:15px 0;
		}
	}
	.top view:first-child{
		margin-top: 15px;
	}
	.between1{
		width: 100%;
		height: 50px;
		background-color: white;
		margin-top: 10px;
		line-height: 50px;
		padding-left: 10px;
		display: flex;
		justify-content: space-between;
	}
	.between2{
		width: 100%;
		height: 50px;
		background-color: white;
		margin-top:5px;
		line-height: 50px;
		padding-left: 10px;
		display: flex;
		justify-content: space-between;
	}
	span{
		color: #a4a4a8;
	}
	.end{
		width: 90%;
		height: 40px;
		background-color:#1067d1 ;
		border-radius: 50px;
		color: #ffffff;
		line-height: 40px;
		text-align: center;
		margin: 0 auto;
		margin-top: 35px;
	}
}

</style>
